<template>
  <div class="big">
    <div class="top" @click="goback">
      <img src="./images/箭头.png" alt="" />
    </div>

    <div class="top-center">
      <div class="top-center-one" v-for="item in count" :key="item.id">
        <div class="content">
          <p>{{ item.num }}</p>
          <span>{{ item.str }}</span>
        </div>
      </div>
    </div>

    <div class="middle">
      <p>定时提醒</p>
    </div>

    <div class="bottom" v-for="item in add" :key="item.id">
      <div class="bottom-img">
        <img src="./images/头像.png" alt="" />
      </div>
      <div class="bottom-content">
        <p>{{item.p}}</p>
        <div class="bottom-content-one">
          <span>计划日期:2023-4-2</span>
          <p>提醒时间:2023-4-2 07:00</p>
          <span>提醒类型：{{item.span}}</span>
        </div>
      </div>
      <div class="bottom-button">
        <div class="bottom-button-one">
            <button>延迟提醒</button>
        </div>
        <div class="bottom-button-two">
            <button>完成提醒</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "IndexTiming",
  setup() {
    let router = useRouter();

    let count = reactive([
      {
        id: 0,
        num: 3,
        str: "今日提醒",
      },
      {
        id: 1,
        num: 0,
        str: "过期提醒",
      },
      {
        id: 2,
        num: 1,
        str: "计划提醒",
      },
    ]);

    let add = reactive([
        {
            id:0,
            p:'清洁',
            span:'每周一'
        },
        {
            id:1,
            p:'喂食',
            span:'每周天'
        },
        {
            id:2,
            p:'驱虫',
            span:'每周一'
        }
    ]) 


    function goback() {
      router.go(-1);
    }

    return {
      goback,
      count,
      add,
    };
  },
};
</script>

<style lang="less" scoped>
.big {
  margin: 0;
  padding: 0;
}
.top {
  width: 1.25rem;
  height: 1.875rem;
  margin-left: 1.875rem;
  margin-top: 1.875rem;
}
.top img {
  width: 1.25rem;
  height: 1.875rem;
}

.top-center {
  width: 21.8125rem;
  height: 4.25rem;
  border-radius: 1.25rem;
  margin-left: 1.15rem;
  margin-top: 1.25rem;
  background-color: rgb(135, 142, 205);
  display: flex;
  flex-direction: row;
  .top-center-one {
    width: 5.5rem;
    height: 4.25rem;
    margin-left: 1.25rem;
    // background-color: orange;
  }
  .content p {
    text-align: center;
    margin-top: 0.625rem;
  }
  .content span {
    text-align: center;
    margin-left: 0.625rem;
    line-height: 3.125rem;
  }
}

.middle p {
  font-size: 1.5625rem;
  margin-left: 1.25rem;
  margin-top: 2.5rem;
}

.bottom {
  width: 21.8125rem;
  height: 7.25rem;
  border-radius: 1.25rem;
  margin-left: 1.15rem;
  margin-top: 2.25rem;
  background-color: rgb(185, 187, 223);;
  .bottom-img {
    width: 2.1875rem;
    height: 2.1875rem;
  }
  .bottom-img img {
    width: 2.1875rem;
    height: 2.1875rem;
    margin-left: 1.5625rem;
    margin-top: 0.625rem;
  }

  .bottom-content {
    width: 10.125rem;
    height: 6.25rem;
    margin-left: 4.5rem;
    margin-top: -1.5rem;
    // background-color: orange;
    .bottom-content-one{
        font-size: .625rem;
        margin-top: .625rem;
    }
  }

  .bottom-button{
    width: 9.125rem;
    height: 1.875rem;
    margin-left: 12.25rem;
    margin-top: -1.875rem;
    // background-color: pink;
    .bottom-button-one{
        width: 4.5rem;
        height: 1.875rem;
        // background-color: orange;
    }
    .bottom-button-one button{
        width: 4.5rem;
        height: 1.875rem;
        border-radius: 1.25rem;
        font-size: .5rem;
        border: 0;
    }
    .bottom-button-two{
        width: 4.5rem;
        height: 1.875rem;
        margin-left: 4.5rem;
        margin-top: -1.875rem;
        // background-color: orange;
    }
    .bottom-button-two button{
        width: 4.5rem;
        height: 1.875rem;
        border-radius: 1.25rem;
        font-size: .5rem;
        border: 0;
        background-color: rgb(135, 142, 205);;
    }
  }

}
</style>